<template>
  <div>
    <sticky-top>
      <div class="title">
        <span>{{ isCreate ? '创建租赁房源' : '更新租赁房源' }}</span>
        <span class="back" @click="back"> <i class="iconfont icon-fanhui"></i> 返回 </span>
        <el-divider></el-divider>
      </div>
    </sticky-top>
    <div class="container">
      <div class="wrap">
        <el-row>
          <el-col :lg="16" :md="20" :sm="24" :xs="24">
            <el-form :model="form" status-icon ref="form" label-width="100px" @submit.native.prevent>
              <el-form-item label="房源标题" prop="title">
                <el-input size="medium" v-model="form.title" placeholder="请填写房源标题"></el-input>
              </el-form-item>

              <el-form-item label="价格/每月（元）" prop="price">
                <el-input-number v-model="form.price" :precision="0" :step="1"></el-input-number>
              </el-form-item>
              <el-form-item label="预约费（元）" prop="price">
                <el-input-number v-model="form.discount_price" :precision="0" :step="1"></el-input-number>
              </el-form-item>

              <el-form-item label="联系人" prop="contact">
                <el-input v-model="form.contact" placeholder="请填写房源联系人"></el-input>
              </el-form-item>
              <el-form-item label="联系方式" prop="mobile">
                <el-input v-model="form.mobile" placeholder="请填写房源联系方式"></el-input>
              </el-form-item>

              <!-- 折扣价 打折，或者折扣价 -->
              <!-- <el-form-item label="折扣价" prop="discount_price">
                <el-radio-group v-model="radio">
                  <el-radio :label="1">无折扣</el-radio>
                  <el-radio :label="2">折扣价</el-radio>
                  <el-radio :label="3">打折</el-radio>
                </el-radio-group>
                <el-input
                  :disabled="radio === 1"
                  style="margin: 5px 0"
                  size="medium"
                  v-model="discount_price_kernel"
                ></el-input>
                <el-input disabled size="medium" v-model="form.discount_price"></el-input>
              </el-form-item> -->

              <el-form-item v-if="!isCreate" label="编码" prop="code">
                <el-input disabled size="medium" v-model="form.code" placeholder="请填写编码"></el-input>
              </el-form-item>

              <!-- <el-form-item label="库存" prop="stock">
                <el-input-number v-model="form.stock" :step="1" step-strictly></el-input-number>
              </el-form-item> -->

              <el-form-item label="物业" prop="spu_id">
                <el-autocomplete
                  @focus="loadSpuSuggestions"
                  popper-class="my-autocomplete"
                  class="inline-input"
                  v-model="spuState"
                  :fetch-suggestions="querySpuSearch"
                  placeholder="请选择所属物业"
                  @select="handleSpuSelect"
                >
                  <template slot-scope="{ item }">
                    <span class="id">{{ item.id }}</span>
                    <span class="name">{{ item.title }}</span>
                  </template>
                </el-autocomplete>
              </el-form-item>

              <el-form-item label="是否上架">
                <el-switch
                  size="medium"
                  v-model="saled"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="上架"
                  inactive-text="下架"
                ></el-switch>
              </el-form-item>

              <el-form-item label="主图" prop="img">
                <upload-imgs :max-num="1" ref="uploadEle" :value="initData" />
              </el-form-item>

              <el-form-item label="详情图" prop="sku_detail_img_list">
                <upload-imgs multiple sortable :max-num="maxNum" ref="uploadDetailEle" :value="initDetailData" />
              </el-form-item>

              <el-form-item label="标签" prop="tags">
                <dynamic-tag v-model="dynamicTags"></dynamic-tag>
              </el-form-item>

              <el-form-item label="描述" prop="description">
                <el-input type="textarea" :rows="8" v-model="form.description" placeholder="请填写描述"></el-input>
              </el-form-item>

              <el-form-item
                v-for="(specKey, index) in specKeys"
                :key="index"
                :label="`${specKey.name}`"
                :prop="specKey.name"
              >
                <el-cascader
                  v-if="!inputKeys.includes(specKey.name)"
                  :placeholder="`选择${specKey.name}`"
                  v-model="specs[index]"
                  :props="makeProps(specKey.id)"
                ></el-cascader>
                <el-input
                  v-else-if="specKey.name === '地址'"
                  :placeholder="`输入${specKey.name}`"
                  v-model="specs[index].value"
                  maxlength="60"
                  show-word-limit
                ></el-input>
                <el-input v-else :placeholder="`输入${specKey.name}`" v-model="specs[index].value"></el-input>
              </el-form-item>

              <el-form-item class="submit">
                <el-button
                  v-permission="{ permission: ['创建租赁房源', '更新租赁房源'], type: 'disabled' }"
                  type="primary"
                  @click="submitForm('form')"
                  >保 存</el-button
                >
                <el-button @click="resetForm('form')">重 置</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import Spu from '@/model/spu'
import Sku from '@/model/sku'
import SpecKey from '@/model/spec-key'
import SpecValue from '@/model/spec-value'
import UploadImgs from '@/component/base/upload-image'
import DynamicTag from '@/component/tag/DynamicTag.vue'

export default {
  components: {
    UploadImgs,
    DynamicTag,
  },
  props: {
    isCreate: {
      type: Boolean,
      default: false,
    },
    skuId: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      form: {
        title: '',
        online: 1,
        price: 0,
        discount_price: null,
        currency: null,
        code: null,
        stock: '2147483647',
        img: null,
        sku_detail_img_list: null,
        description: null,
        contact: null,
        mobile: null,
      },
      rules: {
        minWidth: 10,
        minHeight: 10,
        maxSize: 5,
      },
      dynamicTags: [],
      radio: 1,
      discount_price_kernel: null,
      initData: [],
      maxNum: 9,
      initDetailData: [],
      saled: true,
      spuState: '',
      spuList: [],
      specs: [],
      specKeys: [],
      inputKeys: ['面积', '地址', '单元', '楼层', '房号'],
    }
  },
  watch: {
    saled(val) {
      this.form.online = val ? 1 : 0
    },
    discount_price_kernel(val) {
      switch (this.radio) {
        case 1:
          this.form.discount_price = null
          break
        case 2:
          this.form.discount_price = val
          break
        case 3:
          // eslint-disable-next-line
          const rate = parseFloat(val)
          this.form.discount_price = this.form.price * rate
          break
        default:
          this.form.discount_price = null
      }
    },
  },
  async created() {
    this.$nextTick(async () => {
      if (!this.isCreate) {
        const res = await Sku.getSkuDetail(this.skuId)
        this.form = res
        const initData = [
          {
            id: res.id,
            display: res.img,
          },
        ]
        this.saled = res.online === 1
        this.initData = initData
        this.spuState = res.spu_name
        this.form.description = res.description
        this.initDetailData = res.sku_detail_img_list
          ? res.sku_detail_img_list.map((it, index) => ({ id: index, display: it }))
          : []
        await this.loadKeyAndValues(res.spu_id)
        this.dynamicTags = res.tags ? res.tags.split('$') : []
      }
    })
  },

  methods: {
    async loadKeyAndValues(spuId) {
      this.specs = []
      const specKeys = await SpecKey.getBySpuId(spuId)
      this.specKeys = specKeys
      // eslint-disable-next-line no-unused-vars
      for (const specKeyy of specKeys) {
        if (this.skuId && !this.isCreate) {
          // eslint-disable-next-line
          const ttmp = await Sku.getSpecValueId(this.skuId, specKeyy.id)
          /* eslint-disable no-await-in-loop */
          if (ttmp.value_id) {
            const getSpec = await SpecValue.getSpecValue(ttmp.value_id)
            if (!this.inputKeys.includes(specKeyy.name)) {
              this.specs.push([getSpec.id])
              this.specs = this.specs.filter(spec => !!spec)
            } else {
              this.specs.push({ value_id: getSpec.id, key_id: specKeyy.id, value: getSpec.value })
              this.specs = this.specs.filter(spec => !!spec)
            }
          }
        } else {
          // eslint-disable-next-line
          if (!this.inputKeys.includes(specKeyy.name)) {
            const suggestions = await SpecValue.getBySpecKeyId(specKeyy.id)
            this.specs.push([suggestions[0].id])
          } else {
            this.specs.push({ key_id: specKeyy.id, value: '' })
          }
        }
      }
    },
    // eslint-disable-next-line
    async submitForm(formName) {
      await this.getValue()
      try {
        const postData = { ...this.form }
        const tags = this.dynamicTags.join('$')
        postData.tags = tags
        const selectors = []
        for (let i = 0; i < this.specs.length; i++) {
          const spec = this.specs[i]
          if (Array.isArray(spec)) {
            if (spec[0]) {
              /* eslint-disable no-await-in-loop */
              const getSpec = await SpecValue.getSpecValue(spec[0])
              spec.value_id = getSpec.id
              spec.key_id = getSpec.spec_id
              spec.value = getSpec.value
            }
          }
          const tmp = {
            key_id: spec.key_id,
            value: spec.value,
            value_id: spec.id,
          }
          if (this.isCreate && !spec.value_id && spec.value) {
            /* eslint-disable no-await-in-loop */
            const specValue = await SpecValue.insertSpecValue({
              extend: '',
              spec_id: spec.key_id,
              value: spec.value,
            })
            tmp.value_id = specValue.id
          } else {
            tmp.value_id = spec.value_id
          }

          selectors.push(tmp)
        }
        postData.selectors = selectors
        let res
        if (this.isCreate) {
          res = await Sku.addSku(postData)
        } else {
          res = await Sku.editSku(this.skuId, postData)
        }
        if (res.code < window.MAX_SUCCESS_CODE) {
          this.$message.success(`${res.message}`)
          // this.resetForm(formName)
          this.$confirm('是否返回上一页?', '提示', {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'info',
          }).then(async () => {
            this.$emit('editClose')
          })
        }
      } catch (error) {
        console.error(error)
      }
    },
    makeProps(key_id) {
      return {
        lazy: true,
        async lazyLoad(node, resolve) {
          const { level } = node
          const suggestions = await SpecValue.getBySpecKeyId(key_id)
          const nodes = suggestions.map(item => ({
            value: item.id,
            label: `${item.value}`,
            leaf: level >= 0,
          }))
          resolve(nodes)
        },
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    querySpuSearch(queryString, cb) {
      // eslint-disable-next-line
      const suggestions = this.spuList
      const results = queryString ? suggestions.filter(this.createSpuFilter(queryString)) : suggestions
      cb(results)
    },
    createSpuFilter(queryString) {
      // eslint-disable-next-line
      return suggestion => {
        return suggestion.title.toLowerCase().indexOf(queryString.toLowerCase()) === 0
      }
    },
    handleSpuSelect(item) {
      this.spuState = item.title
      this.form.spu_id = item.id
      this.loadKeyAndValues(item.id)
    },
    async getValue() {
      const val = await this.$refs.uploadEle.getValue()
      if (val && val.length > 0) {
        this.form.img = val[0].display
      }
      const val2 = await this.$refs.uploadDetailEle.getValue()
      if (val2 && val2.length > 0) {
        this.form.sku_detail_img_list = val2.map(it => it.display)
      }
    },
    back() {
      this.$emit('editClose')
    },
    async loadSpuSuggestions() {
      if (this.spuList.length > 0) {
        return
      }
      try {
        this.spuList = await Spu.getList()
        if (this.spuList.length === 0) {
          this.$message.error('未找到物业建议，请先添加物业')
        }
      } catch (error) {
        this.$message.error('获取物业建议信息失败')
        console.error(error)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.el-divider--horizontal {
  margin: 0;
}

.container {
  .title {
    height: 59px;
    line-height: 59px;
    color: $parent-title-color;
    font-size: 16px;
    font-weight: 500;
    text-indent: 40px;

    .back {
      float: right;
      margin-right: 40px;
      cursor: pointer;
    }
  }

  .wrap {
    padding: 20px;
  }

  .submit {
    float: left;
  }
}

.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;
    display: inline-flex;
    align-content: space-around;
    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .id {
      margin-right: 15px;
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
.white-color {
  background-color: #fff;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>
